<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.phead {
  .name {
    font-size: 18px;
  }
  .type-name {
    color: #1166ff;
  }
}
.pcon {
  img {
    margin-top: 6px;
    width: 120px;
    height: 90px;
  }
  .info {
    padding-left: 10px;
    .leader {
      line-height: 2.4em;
    }
    .time {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>

<template>
  <div class="">
    <x-header class="header" :left-options="{backText: '',preventGoBack:true}" @on-click-back="onBack()">
      我的订单
    </x-header>
    <div class="content">
      <group title="">
        <x-input title="下单身份证后六位:" placeholder="输入身份证信息" v-model="unumber" :min="6" :max="6" required></x-input>
        <x-input title="订单联系电话:" placeholder="输入联系电话" mask="999 9999 9999" v-model="fmobile" :max="13" is-type="china-mobile" required></x-input>
        
      </group>
      <div style="padding:15px;">
        <x-button @click.native="onSearch()" type="primary">开始查询</x-button>
      </div>
      <divider></divider>
      <ul class="list-group">
        <li class="list-group-item ub my-item" v-for="(x,i) of eOrders" :key="i">
            <div class="uf-1">
                <h4>{{x.selmobile}}（腾讯大王卡）</h4>
                <p>订单编号：{{x.code}}</p>
                <p>申请人姓名：{{x.fname}}</p>      
                <p>身份证号：{{x.unumber}}</p>
                <p>联系电话：{{x.fmobile}}</p>
                <p>配送地址：{{x.faddress}}</p>
                <p>下单时间：{{x.createtime|datetime}}</p>
                <p>订单状态：{{x.accept?'已办理':'已下单'}}</p>
                
            </div>
            
        </li>
        
      </ul>
    </div>
  </div>
</template>

<script>
import { XHeader, Group, XInput, Divider, XNumber, XButton } from "vux";
export default {
  data() {
    return {
      fmobile: "",
      unumber: "",
      eOrders:[],
     
    };
  },
  created() {
    
  },
  methods: {
    onSearch() {
      if(this.unumber.length!=6){
        this.$vux.toast.show({
          type:"warn",
          text:"请输入身份证号后6位"
        })
        return;
      }
      this.$store
        .dispatch("orderSearch", {
          fmobile: this.fmobile.replace(/ /g, ""),
          unumber: this.unumber
        })
        .then(resp => {
          if(resp.data.items.length==0){
            alert("您还没有相关订单记录！")
          }
          this.eOrders=resp.data.items;
         
        });
    },
    onBack(){
      window.location.href="http://weixin.nmict.cn/ln-shop/"
    }
  },
  components: {
    XHeader,
    Group,
    XInput,
    Divider,
    XNumber,
    XButton
  }
};
</script>

